<template>
  <div v-loading="load">
    <window-title title="基本信息"></window-title>
    <!-- 基本信息 -->
    <el-card shadow="never" style="margin-top:10px">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="order-form">
            <div class="order-form-label">订单号：</div>
            <div class="order-form-content">{{order_info.out_trade_no}}</div>
          </div>
          <div class="order-form">
            <div class="order-form-label">支付金额：</div>
            <div class="order-form-content">{{order_info.total_price}}</div>
          </div>
          <div class="order-form">
            <div class="order-form-label">订单状态：</div>
            <div class="order-form-content">已完成</div>
          </div>
          <div class="order-form">
            <div class="order-form-label">订单来源：</div>
            <div class="order-form-content">
              <span v-if="order_info.source == 1">小程序</span>
              <span v-if="order_info.source == 2">H5</span>
              <span v-if="order_info.source == 3">团报</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="order-form">
            <div class="order-form-label">创建时间：</div>
            <div class="order-form-content">{{order_info.create_time}}</div>
          </div>
          <div class="order-form">
            <div class="order-form-label">支付时间：</div>
            <div class="order-form-content">{{order_info.pay_time}}</div>
          </div>
          <div class="order-form">
            <div class="order-form-label">审核时间：</div>
            <div class="order-form-content">{{order_info.update_time}}</div>
          </div>
          <div class="order-form">
            <div class="order-form-label">支付方式</div>
            <div class="order-form-content">微信支付</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <window-title title="订单成员"></window-title>
    <el-table size="mini" border style="margin-top:10px;" :data="user_list">
      <el-table-column type="index" width="40px"></el-table-column>
      <el-table-column label="签到码" width="80px" prop="code"></el-table-column>
      <el-table-column label="是否验票" width="80px">
        <template slot-scope="item">
          <el-tag size="small" type="primary" v-if="item.row.checked == 0">待验票</el-tag>
          <el-tag size="small" type="success" v-if="item.row.checked == 1">已验票</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="报名信息">
        <template slot-scope="item">
          <el-row :gutter="20">
            <el-col :span="12" v-for="(items,keys) in item.row.form" :key="keys">
              <div class="form-table-item">
                <span class="formtable-lable">{{items.name}}</span> :
                <span v-if="items.type != 'image'">{{items.value}}</span>
                <img :src="items.value" v-else style="width:50px;" @click="seeImg(items.value)">
              </div>
            </el-col>
          </el-row>
          <div></div>
        </template>
      </el-table-column>
    </el-table>
    <window-title title="附加服务"></window-title>
    <el-table size="mini" border style="margin-top:10px;" :data="serv_list">
      <el-table-column type="index" width="40px"></el-table-column>
      <el-table-column label="服务名" prop="ser_name"></el-table-column>
      <el-table-column label="购买数量" width="80px" prop="num"></el-table-column>
      <el-table-column label="购买单价" width="80px" prop="ser_price"></el-table-column>
      <el-table-column label="购买总价" width="80px">
        <template slot-scope="item">{{item.row.ser_price * item.row.num}}</template>
      </el-table-column>
    </el-table>
    <!-- 查看大图 -->
    <el-dialog :visible.sync="see_model" width="500px" title="查看大图" :append-to-body="true">
      <img :src="img_url" alt="" style="width:100%;">
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from "../../../components/unit/title.vue";

export default {
  components: { windowTitle },
  props: { order_id: {} },
  data() {
    return {
      order_info: {},
      user_list: [
        {
          form: []
        }
      ],
      serv_list: [],
      load: true,
      img_url : '',
      see_model:false
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //查看大图
    seeImg(img){
      this.img_url = img;
      this.see_model = true;
    },
    //获取订单详情
    getData() {
      this.load = true;
      this.ajaxs("active/orderDetail", {
        data: { id: this.order_id },
        success: res => {
          this.order_info = res.msg.order_info;
          this.user_list = res.msg.user_list;
          this.serv_list = res.msg.serv_list;
          this.load = false;
          console.log(res);
        }
      });
    }
  },
  watch: {
    order_id(v, o) {
      this.getData();
    }
  }
};
</script>

<style>
.order-form {
  overflow: hidden;
  height: 30px;
  line-height: 30px;
}
.order-form > div {
  float: left;
}
.order-form-label {
  width: 80px;
}
.order-form-content {
  width: calc(100% - 90px);
  margin-left: 10px;
}
.formtable-lable {
  display: inline-block;
  width: 50px;
}
.form-table-item {
  line-height: 24px;
}
</style>